<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vue 调试</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
  <script type="importmap">
      {
        "imports": {
          "vue": "/dist/vue.esm-browser.js"
        }
      }
    </script>
</head>

<body>
  <div id="app" v-cloak>
    <div>{{p.name}}</div>
    <div><input v-model="p.name" /></div>
  </div>
</body>
<script type="module">
  console.log('%c----开始执行-----', "color:red")
  import { reactive, effect, createApp, ref, computed } from 'vue'
  // const person = {
  //   name: '张三',
  //   age: 20
  // }

  // const p = reactive(person)
  // const val = ref(0)
  // effect(() => {
  //   console.log(val.value)
  // })
  // val.value++
  // console.log(val.value)

  // p.age = 10
  // createApp({
  //   setup() {
  //     return {
  //       p
  //     }
  //   }
  // }).mount('#app')
  const count = ref(10)
  const total = computed(() => {
    return count.value * 10
  })
  effect(() => {
    console.log(total.value)
  })
  count.value = 100

  console.log('%c----执行完毕-----', "color:red")

</script>

</html>